<nav role="navigation" class="navbar navbar-default navbar-top navbar-fixed-top">
         <!-- START navbar header-->
         <div class="navbar-header">
            <a href="<?php echo admin_url();?>" class="navbar-brand">
               <div class="brand-logo">
                  CMS Admin
               </div>
               <div class="brand-logo-collapsed">
                  <img src="<?php echo admin_theme_url();?>app/img/logo-single.png" alt="App Logo" class="img-responsive">
               </div>
            </a>
         </div>
         <!-- END navbar header-->
         <!-- START Nav wrapper-->
         <div class="nav-wrapper">
            <!-- START Left navbar-->
            <ul class="nav navbar-nav">
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="#" data-toggle-state="aside-collapsed" class="hidden-xs">
                     <em class="fa fa-navicon"></em>
                  </a>
                  <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
                  <a href="#" data-toggle-state="aside-toggled" class="visible-xs">
                     <em class="fa fa-navicon"></em>
                  </a>
               </li>
               <!-- START Messages menu (dropdown-list)-->
               
               <!-- END Messages menu (dropdown-list)-->
               <!-- START User avatar toggle-->
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="#" data-toggle-state="aside-user">
                     <em class="fa fa-user"></em>
                  </a>
               </li>
               <!-- END User avatar toggle-->
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="#">
                     <em class="fa fa-clock-o" id="time-clock"></em>
                  </a>
               </li>
            </ul>
            <!-- END Left navbar-->
            <!-- START Right Navbar-->
            <ul class="nav navbar-nav navbar-right">
               
               <!-- Fullscreen-->
               <li>
                  <a href="#" data-toggle="fullscreen">
                     <em class="fa fa-expand"></em>
                  </a>
               </li>
               <!-- START Alert menu-->
              
               <!-- END Alert menu-->
               <!-- START Contacts button-->
               <li>
                  <a href="#" data-toggle-state="offsidebar-open">
                     <em class="fa fa-group"></em>
                  </a>
               </li>
               <!-- END Contacts menu-->
            </ul>
            <!-- END Right Navbar-->
         </div>
         <!-- END Nav wrapper-->
         <!-- START Search form-->
         <form role="search" action="" class="navbar-form">
            <div class="form-group has-feedback">
               <input type="text" placeholder="Type and hit Enter.." class="form-control">
               <div data-toggle="navbar-search-dismiss" class="fa fa-times form-control-feedback"></div>
            </div>
            <button type="submit" class="hidden btn btn-default">Submit</button>
         </form>
         <!-- END Search form-->
      </nav>
      <script type="text/javascript">

flag = true;
timer = '';
setInterval(function(){phpJavascriptClock();},1000);

function phpJavascriptClock()
{
   if ( flag ) {
      timer = (<?php echo time();?>+1)*1000;
   }
   var d = new Date(timer);
   //months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
   months = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');

   month_array = new Array('January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'Augest', 'September', 'October', 'November', 'December');

   currentYear = d.getFullYear();
   month = d.getMonth();
   var currentMonth = months[month];
   var currentMonth1 = month_array[month];
   var currentDate = d.getDate();
   currentDate = currentDate < 10 ? '0'+currentDate : currentDate;

   var hours = d.getHours();
   var minutes = d.getMinutes();
   var seconds = d.getSeconds();

   var ampm = hours >= 12 ? 'PM' : 'AM';
   hours = hours % 12;
   hours = hours ? hours : 12; // the hour ’0' should be ’12'
   minutes = minutes < 10 ? '0'+minutes : minutes;
   seconds = seconds < 10 ? '0'+seconds : seconds;
   var strTime = hours + ':' + minutes+ ':' + seconds + ' ' + ampm;
   
    
   $("#time-clock").text(' '+currentDate+"/"+currentMonth+"/"+currentYear+" "+strTime);
   //document.getElementById("clock").innerHTML= currentMonth+' ' + currentDate+' , ' + currentYear + ' ' + strTime ;

   //document.getElementById("demo1").innerHTML= currentMonth1+' ' + currentDate+' , ' + currentYear + ' ' + strTime ;

   //document.getElementById("demo2").innerHTML= currentDate+':' +month+':' +currentYear + ' ' + strTime ;

   //document.getElementById("demo3").innerHTML= strTime ;

   flag = false;
   timer = timer + 1000;
}

        </script>